<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<title>在线考试系统</title>
<%@include file="../common/include-header.jsp" %>
<link href="/static/css/reviewExam.css" rel="stylesheet">
<body class="gray-bg">
<div id="box">
    <div id="leftDiv">
        <div id="nav">
            <div>
                <p>剩余时间</p>
                <h2><sapn id="minute">00</sapn> : <span id="second">00</span></h2>
                <button id="submitTestPaper">交 &nbsp;&nbsp;卷</button>
                <div id="scantron">
                    <h5>收起答题卡(<span>50</span>)</h5>
                    <div id="nos">
                        <c:forEach items="${examDetails}" var="question" varStatus="vs">
                            <div class="no notSelectedNo" data-no="${vs.index+1}">
                                <a href="#no${vs.index+1}">${vs.index+1}</a>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="rightDiv">
        <div id="questions">
            <c:forEach items="${examDetails}" var="question" varStatus="vs">
<%--                <c:set var="type" value="${question.typeId == 10000 ? 'radio' : 'checkbox'}"> </c:set>--%>
                <div class="question">
                    <a name="no${vs.index+1}"></a>
                    <input type="hidden" class="answer" name="answer" value="${question.yourAnswer}">
                    <input type="hidden" class="questionId" value="${question.id}">
                    <div class="questionTop">
                        <div class="title">
                            <span>${question.question}</span> <br>
                            <c:if test="${question.typeId == 10000}">(单选)</c:if>
                            <c:if test="${question.typeId == 10001}">(多选)</c:if>
                        </div>
                        <div class="img notSelectedDiv"></div>
                        <h3>${vs.index+1}</h3>
                    </div>
                    <ul class="questionBottom">
                        <li>
                            <input name="no${vs.index+1}" data-no="${vs.index+1}" class="option" type="${type}"
                                   value="A">
                            A : ${question.optionA}
                        </li>
                        <li>
                            <input name="no${vs.index+1}" data-no="${vs.index+1}" class="option" type="${type}"
                                   value="B">
                            B : ${question.optionB}
                        </li>
                        <li>
                            <input name="no${vs.index+1}" data-no="${vs.index+1}" class="option" type="${type}"
                                   value="C">
                            C : ${question.optionC}
                        </li>
                        <li>
                            <input name="no${vs.index+1}" data-no="${vs.index+1}" class="option" type="${type}"
                                   value="D">
                            D : ${question.optionD}
                        </li>
                    </ul>
                </div>
            </c:forEach>
        </div>
    </div>
</div>
<%@include file="../common/include-footer.jsp" %>
<script src="/static/plugin/select/select2.js"></script>

<script>
    $(function () {
        var intDiff = parseInt(600);//倒计时总秒数量
        timer(intDiff);

        //答题卡和题目序号样式切换
        $(".questionBottom li").click(function () {
            var $option = $(this).find("input");
            var no = $option.data('no');
            var $noDiv;
            var $imgDiv = $option.parents(".question").find(".img");
            for (var i = 0; i < $(".no").length; i++) {
                var $no = $($(".no")[i]);
                if ($no.data('no') == no) {
                    $noDiv = $no;
                }
            }
            if ($option.data('checked')) {
                $option.prop('checked', false);
                $option.data('checked', false);
                if ($option.attr("type") == "checkbox"){
                    var name = $option.attr("name");
                    var length = $("input[name=" + name + "]:checked").length;
                    if (length != 0){return};
                }
                $noDiv.removeClass('selectedNo');
                $noDiv.addClass('notSelectedNo');
                $imgDiv.add('notSelectedDiv');
                $imgDiv.removeClass('selectedDiv');
            } else {
                $option.prop('checked', true);
                $option.data('checked', true);
                $noDiv.removeClass('notSelectedNo');
                $noDiv.addClass('selectedNo');
                $imgDiv.addClass('selectedDiv');
            }
        });

        //交卷按钮点击事件
        $("#submitTestPaper").click(function () {
            layer.confirm(
                "你确定要交卷吗",
                {btn: ["交卷", "继续做题"]},
                function (i) {
                    scoring();

                    var examInfoVo = {"examDetails": examDetails, "score" : score};
                    $.ajax({
                        url: "/exam/saveExamInfo",
                        contentType:"application/json;charset=UTF-8",
                        data: JSON.stringify(examInfoVo),
                        dataType: "json",
                        type: "post",
                        success: function (data) {
                            alert("信息保存成功");
                        }
                    });
                    layer.close(i);

                },
                function () {}
            );
        });

    });

    var errorQuestions = [];//错题数组
    var examDetails = [];//考试明细数组
    var score = {
        "studentId": ${user.id}, "examId": ${exam.id}, "testPaperId": ${exam.testPaper.id}, "amount": ${exam.testPaper.amount}
    };//成绩

    //计算分数
    function scoring() {
        var _score = 100 / $(".question").length;//单题得分
        var correctAmount = 0;//做对的题
        var okAmount = 0;//做了的题

        for (var i = 0; i < $(".question").length; i++) {
            var $question = $($(".question")[i]);//试题div
            var answer = $question.find(".answer").val();//正确答案
            var type  = $question.find(".option").attr("type");//题目类型
            var examDetail = {};//试题明细
            examDetail.questionId = $question.find(".questionId").val();//试题id
            var yourAnswer = "";//你的答案

            if ($question.find(".option:checked").length >= 1){
                okAmount = okAmount + 1;
            }

            //多选
            if (type == "checkbox"){
                var checkboxes = $question.find(".option:checked");
                answer = answer.split("");
                for (var j = 0; j < checkboxes.length; j++){
                    yourAnswer = yourAnswer + $(checkboxes[j]).val();
                }
                for (var j = 0; j < checkboxes.length; j++){
                    if (answer[j] != $(checkboxes[j]).val()) {
                        break;
                    }
                    if (j = checkboxes.length - 1) {
                        correctAmount = correctAmount + 1;
                    }
                }
                examDetail.yourAnswer = yourAnswer;
                //单选
            } else {
                examDetail.yourAnswer = $question.find(".option:checked").val();
                if ($question.find(".option:checked").val() == answer){
                    correctAmount = correctAmount + 1;
                }
            }
            examDetails.push(examDetail);
        }
        score.correctAmount = correctAmount;
        score.okAmount = okAmount;
        score.score = correctAmount * _score;
    }

    //倒计时
    function timer(intDiff) {
        var timer = window.setInterval(function () {
            var day = 0,
                hour = 0,
                minute = 0,
                second = 0;//时间默认值
            if (intDiff > 0) {
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $("#minute").text(minute);
            $("#second").text(second);
            if (minute == "00" && second == "00"){
                scoring();
                clearInterval(timer);
            }
            intDiff--;
        }, 1000);
    }

</script>
</body>
</html>
